import { defineConfig, presetUno, presetAttributify } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify()
  ],
  shortcuts: {
    // 常用组合样式
    'flex-center': 'flex justify-center items-cenSter',
    'flex-between': 'flex justify-between items-center',
    'absolute-center': 'absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2',
    
    // 按钮样式
    'btn': 'px-4 py-2 rounded cursor-pointer inline-block font-medium text-center border-none outline-none',
    'btn-primary': 'btn bg-green-500 text-white hover:bg-green-600',
    'btn-secondary': 'btn bg-gray-200 text-gray-700 hover:bg-gray-300',
    
    // 卡片样式
    'card': 'bg-white rounded-lg shadow-sm border border-gray-200',
    'card-padding': 'p-4',
    
    // 输入框样式
    'input': 'w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500',
    'input-error': 'input border-red-500 focus:border-red-500',
    
    // 文本样式
    'text-primary': 'text-gray-900',
    'text-secondary': 'text-gray-600',
    'text-muted': 'text-gray-400',
    'text-error': 'text-red-500',
    
    // 移动端适配
    'mobile-container': 'w-full min-h-screen bg-gray-50',
    'mobile-header': 'w-full h-12vw bg-blue-500 text-white text-4.8vw fixed left-0 top-0 z-1000 flex-center',
    'mobile-content': 'w-full pt-12vw',
    'mobile-footer': 'w-full h-14vw border-t border-gray-300 bg-white fixed left-0 bottom-0 flex justify-around items-center z-1000',
  },
  theme: {
    spacing: {
      '12vw': '12vw',
      '14vw': '14vw',
      '15vw': '15vw',
      '18vw': '18vw',
      '20vw': '20vw',
      '24vw': '24vw',
      '30vw': '30vw',
    },
    fontSize: {
      '2.5vw': '2.5vw',
      '2.8vw': '2.8vw',
      '3vw': '3vw',
      '3.5vw': '3.5vw',
      '4vw': '4vw',
      '4.5vw': '4.5vw',
      '4.8vw': '4.8vw',
      '5vw': '5vw',
    },
    colors: {
      primary: '#0097FF',
      success: '#38CA73',
      danger: '#ff4757',
    }
  },
  rules: [
    // 自定义vw单位支持
    [/^w-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ width: `${d}vw` })],
    [/^h-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ height: `${d}vw` })],
    [/^text-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ 'font-size': `${d}vw` })],
    [/^p-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ padding: `${d}vw` })],
    [/^m-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ margin: `${d}vw` })],
    [/^mt-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ 'margin-top': `${d}vw` })],
    [/^mb-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ 'margin-bottom': `${d}vw` })],
    [/^ml-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ 'margin-left': `${d}vw` })],
    [/^mr-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ 'margin-right': `${d}vw` })],
    [/^my-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ 'margin-top': `${d}vw`, 'margin-bottom': `${d}vw` })],
    [/^pt-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ 'padding-top': `${d}vw` })],
    [/^pb-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ 'padding-bottom': `${d}vw` })],
    [/^pl-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ 'padding-left': `${d}vw` })],
    [/^pr-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ 'padding-right': `${d}vw` })],
    // 复合padding（上下-左右-下-上）
    [/^p-(\d+(?:\.\d+)?)vw-(\d+(?:\.\d+)?)vw-(\d+(?:\.\d+)?)vw-(\d+(?:\.\d+)?)vw$/, ([, t, r, b, l]) => ({ 
      padding: `${t}vw ${r}vw ${b}vw ${l}vw` 
    })],
    // 百分比宽度
    [/^w-(\d+)%$/, ([, d]) => ({ width: `${d}%` })],
    // flex项
    [/^flex-(\d+)$/, ([, d]) => ({ flex: d })],
    // 圆角
    [/^rounded-(\d+)px$/, ([, d]) => ({ 'border-radius': `${d}px` })],
    // 字体粗细
    [/^font-(\d+)$/, ([, d]) => ({ 'font-weight': d })],
    // z-index
    [/^z-(\d+)$/, ([, d]) => ({ 'z-index': d })],
    // 用户选择
    ['select-none', { 'user-select': 'none' }],
    // 圆角百分比
    [/^rounded-(\d+)%$/, ([, d]) => ({ 'border-radius': `${d}%` })],
    // 负值边距
    [/^-top-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ top: `-${d}vw` })],
    [/^-right-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ right: `-${d}vw` })],
    [/^-bottom-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ bottom: `-${d}vw` })],
    [/^-left-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ left: `-${d}vw` })],
    // 黄色变种
    ['text-yellow-500', { color: '#FEC80E' }],
    // 字体大小
    [/^text-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ 'font-size': `${d}vw` })],
    // 大尺寸图标/文字
    [/^text-(\d+)vw$/, ([, d]) => ({ 'font-size': `${d}vw` })],
    // 支持小数点的字体大小
    [/^text-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ 'font-size': `${d}vw` })],
    // 边距变种
    [/^py-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ 'padding-top': `${d}vw`, 'padding-bottom': `${d}vw` })],
    [/^px-(\d+(?:\.\d+)?)vw$/, ([, d]) => ({ 'padding-left': `${d}vw`, 'padding-right': `${d}vw` })],
    // 过渡效果
    ['transition-colors', { transition: 'color 0.3s ease' }],
    // 圆角50%
    ['rounded-50%', { 'border-radius': '50%' }],
  ]
}) 